<template>
	<view class="">
		<!-- pc -->
		<match-media :min-width="960">
			<view class="mgt20 content">
				<!-- 通用顶部 -->
				<tableData>
					<template v-slot:one>
						栏目
						<van-button type="primary" size="mini" @click="addColumn">增加栏目</van-button>
					</template>
					<template v-slot:two>页面</template>
					<template v-slot:three>
						<view class="fs18">
							<view class="flex jcsa aic" v-if="true">
								问题
								<van-divider vertical dashed />
								<van-checkbox v-model="check[0]" icon-size="14px">所有待解决问题1/10</van-checkbox>
								<van-divider vertical dashed />
								<van-checkbox v-model="check[1]" icon-size="14px">今日待解决问题1/10</van-checkbox>
								<van-divider vertical dashed />
								<van-checkbox v-model="check[2]" icon-size="14px">今日完成</van-checkbox>
							</view>
							<view class="" v-else>
								<van-button type="primary" size="mini">工作人员选择(多选)</van-button>
								<van-divider vertical dashed />
								<van-icon name="circle" />
								所有解决问题1/10
							</view>
						</view>
					</template>
					<template v-slot:four>操作</template>
					<template v-slot:five>发起人</template>
					<template v-slot:six>跟进人</template>
					<template v-slot:seven>状态</template>
					<template v-slot:eight>图片</template>
				</tableData>
				<!-- 数据 -->
				<tableColumn />
			</view>
		</match-media>
		<!-- app -->
		<!-- <match-media :max-width="960">
			<view class="appContent pd8">
				<view class="flex jcsa aic">
					<view class="">栏目 {{ items[0].lanName }}</view>
					<view class="cpr">页面: {{ items[0].page[0].name }}</view>
					<van-icon name="add-o" class="fs36" @click="createItem" />
				</view>
				<van-divider />
				<view v-for="(i, index) in items[0].page[0].item" class="itemA">
					<view class="flex jcsb">
						<view class="cr">位置:{{ i.issuePosition }}</view>
						<van-popover v-model:show="showPopover[index]" :actions="actions" @select="onSelect" @open="num = index">
							<template #reference>
								<van-icon name="bars" id="test1" />
							</template>
						</van-popover>
					</view>
					<view class="flex jcsb mgt20">
						<view class="">修改{{ index + 1 }}:{{ i.issue }}</view>
						<view class="tag">答</view>
					</view>
					<view class="mgl20" v-if="i.qa">
						<text class="cr">{{ i.qa[0][0].name }}</text>
						提问: {{ i.qa[0][0].content }}
					</view>
					<view class="mgl20" v-if="i.qa">
						<text class="cr">{{ i.qa[0][1].name }}</text>
						回答: {{ i.qa[0][1].content }}
					</view>
					<van-divider :style="{ borderColor: '#999' }" />
				</view>
			</view>
		</match-media> -->
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, provide } from 'vue';
import tableData from './tableData.vue';
import tableColumn from './tableColumn.vue';
// 模拟数据
let items = reactive<any>([
	{
		lanName: '童年时光',
		page: [
			{
				name: '详情页',
				item: [
					{
						issuePosition: '左侧图片',
						itemMsg: [
							{
								promoter: 'www',
								followUp: 'aaa',
								status: 10,
								picture: '',
								issue: '封面爆炸问题不大',
								qa: [
									[
										{
											id: 0,
											name: 'www',
											content: '提出一个很长'
										},
										{ id: 1, name: 'bbb', content: '回答楼主的问题', ansQ: 'www' },
										{ id: 2, name: 'ccc', content: '回答一楼的问题', ansQ: 'bbb' },
										{ id: 3, name: 'bbb', content: '回答楼主的问题', ansQ: 'www' }
									]
								]
							},
							{
								promoter: '32424',
								followUp: '432423',
								status: 20,
								picture: '',
								issue: '爆炸'
							}
						]
					},
					{
						issuePosition: '下方荷兰',
						itemMsg: [{ issue: '荷兰在哪' }]
					}
				]
			}
		]
	}
]);
const addFlag = () => {
	items.map((i) => {
		i.flag = false;
		i.page.map((j) => {
			j.flag = false;
			j.item.map((k) => {
				k.flag = false;
				k.itemMsg.map((l) => {
					l.flag = false;
				});
			});
		});
	});
};
addFlag();
// console.log(items);
// 导出到子组件
provide('userInfo', items);
//app---
// 气泡框
const showPopover = reactive([]);
const actions = [
	{ text: '提问', icon: 'chat-o' },
	{ text: '验收合格', icon: 'friends-o' },
	{ text: '返修', icon: 'scan' }
];
let num = ref<Number>(0);
const onSelect = (action: any) => {
	// console.log(action, num.value);
	uni.showToast({
		icon: 'none',
		title: action.text
	});
};
//---app

// 增加页面
function createItem(): void {
	uni.navigateTo({
		url: '/pages/from/createdPage'
	});
}

let check = reactive<any>([true]);
//添加位置

function addColumn() {}
</script>

<style>
/* * {
	border: 1px solid red;
} */
.content {
	min-width: 1190px;
	/* @media (max-width: 913px) {
		width: 1300px;
		overflow: auto;
	} */
}

/* app */

.appContent {
	background-color: #fff;
	margin-top: 30rpx;
	font-size: 28rpx;
	color: #999;
	line-height: 2;
	.cpr {
		color: palevioletred;
	}
	.van-icon {
		font-size: 44rpx;
	}
	.itemA {
		padding: 20rpx 55rpx;
	}
	.tag {
		background-color: #999;
		height: 40rpx;
		line-height: 1.6;
		padding: 1rpx 10rpx;
	}
}
</style>
